<template>
  <div class="home">
    <input-search></input-search>
    <div v-if="isSaved" class="save-info">
      <div v-for="item in savedCityName" :key="item" class="save-cityName">
        <div class="cityName">{{ item }}</div>
        <div class="buttons">
          <button @click="handleSearch(item)">查看</button>
          <button @click="handleDelete(item)">删除</button>
        </div>
      </div>
    </div>
    <div v-else class="tips">
      暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。
    </div>
    <div class="rencent-weather">近期天气</div>
    <div class="echarts-container">
      <div class="echarts-text">
        <div class="text-list">
          <span>今天</span>
          <span>{{ date[0] }}</span>
          <span>{{ dayWeather[0] }}</span>
          <span>风力{{ dayPower[0] }}级</span>
        </div>
        <div class="text-list">
          <span>明天</span>
          <span>{{ date[1] }}</span>
          <span>{{ dayWeather[1] }}</span>
          <span>风力{{ dayPower[1] }}级</span>
        </div>
        <div class="text-list">
          <span>{{ weeks[week[2]] }}</span>
          <span>{{ date[2] }}</span>
          <span>{{ dayWeather[2] }}</span>
          <span>风力{{ dayPower[2] }}级</span>
        </div>
        <div class="text-list">
          <span>{{ weeks[week[3]] }}</span>
          <span>{{ date[3] }}</span>
          <span>{{ dayWeather[3] }}</span>
          <span>风力{{ dayPower[3] }}级</span>
        </div>
      </div>
      <div class="echarts">
        <e-charts :option="option" class="echart"></e-charts>
      </div>
    </div>
  </div>
</template>

<script>
import ECharts from "@/components/ECharts.vue";
import InputSearch from "../components/InputSearch.vue";
import { requestCodeByIp, requestWeatherByCode,requestWeatherByName } from "@/api/request";
export default {
  name: "HomeView",
  data() {
    return {
      weeks: ["", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      option: {
        grid: {
          left: "-5%",
          right: "-3%",
          containLabel: true, // 自适应图表大小以容纳标签
        },
        xAxis: {
          data: [],
          show: false,
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            data: [],
            type: "line",
            smooth: true,
            label: {
              show: true,
              position: "top",
              color: "#fff",
              formatter: function (params) {
                return "白" + params.value + "℃";
              },
            },
          },
          {
            data: [],
            type: "line",
            smooth: true,
            label: {
              show: true,
              position: "bottom",
              textStyle: {
                color: "#fff",
              },
              formatter: function (params) {
                return "晚" + params.value + "℃";
              },
            },
          },
        ],
      },
      week: [],
      date: [],
      dayWeather: [],
      dayPower: [],
      cityName: "",
      city: "",
      weathers: [],
      localInfo: [],
      savedCityName: [],
      savedCityCode: [],
      isSaved: false,
      searchCity:'',
      adCode:'',
    };
  },
  methods: {
    async getWeather() {
      const res = await requestCodeByIp();
      this.cityName = res.city;
      this.city = res.adcode;

      const resWeather = await requestWeatherByCode(this.city);
      this.weathers = resWeather.forecasts[0].casts;
      this.week = this.weathers.map((item) => item.week);
      this.date = this.weathers.map((item) => item.date);
      this.dayWeather = this.weathers.map((item) => item.dayweather);
      this.dayPower = this.weathers.map((item) => item.daypower);
      //console.log(this.weathers);

      this.option.series[0].data = this.weathers.map((item) => item.daytemp);
      this.option.series[1].data = this.weathers.map((item) => item.nighttemp);
    },
    getSavedWeatherByCode() {
      const savedCity = JSON.parse(localStorage.getItem("savedCity"));
      if (savedCity == undefined) {
        return (this.isSaved = false);
      }
      this.isSaved = true;
      for (let i = 0; i < savedCity.length; i++) {
        this.savedCityName.push(savedCity[i].cityName);
        this.savedCityCode.push(savedCity[i].adCode);
      }
    },
    async handleSearch(cityName){
      const result = await requestWeatherByName(cityName);
      this.searchCity = result.geocodes[0].city;
      this.adCode = result.geocodes[0].adcode;
      // console.log(this.searchCity);
      this.$store.commit("setCityName", this.searchCity);
      this.$store.commit("setAdCode", this.adCode);
      this.$router.push('/search')
    },
    handleDelete(item){
      //获取data里存储的城市和adcode
      //通过传进来的城市名去匹配存储的城市名和请求相应的adcode
      //匹配储存的adcode
      //删除data里存储的匹配到的城市名和adcode
      //将删除完成的数组重新保存到本地
    }
  },
  components: {
    ECharts,
    InputSearch,
  },
  mounted() {
    this.getWeather();
    this.getSavedWeatherByCode();
  },
};
</script>

<style scoped>
.home {
  width: 75%;
  margin: 0 auto;
  box-sizing: border-box;
}
.tips {
  text-align: center;
}
.rencent-weather {
  margin-top: 2rem;
}
.save-cityName{
  display: flex;
  margin: 1rem 0;
  transition: transform 1s ease;
}
.cityName{
  width: 100%;
  padding: 12px;
  background-color: rgb(0, 78, 113);
}
.buttons{
  display: flex;
}
.echarts-container {
  width: 100%;
  margin-top: 0.5rem;
  padding: 2.5rem 3rem 0 3rem;
  border-radius: 0.25rem;
  background-color: rgb(0, 78, 113);
  box-sizing: border-box;
}
.echarts-text {
  display: flex;
  width: 100%;
  gap: 1.5rem;
}
.echarts-text .text-list {
  display: flex;
  flex: 1 1 0%;
  gap: 1rem;
  text-align: center;
  flex-direction: column;
}
.text-list span {
  padding: 4px;
}
.echarts {
  position: relative;
  width: 100%;
  height: 280px;
}
.echart {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  user-select: none;
}
</style>
